<template>
  <div>
    <header>Prepárese para pagar</header>
    <div class="placeholder"></div>
    <div class="conent">
      <div class="title-card">
        <div class="total">
          <div class="number">{{ repayment.remainingDays }}</div>
          <p>Número de días de atraso</p>
        </div>
        <div class="info">
          <div class="info-content">
            <div class="number">MXN {{ repayment.price }}</div>
            <p>Reembolso</p>
          </div>
          <div class="info-content">
            <div class="number">{{ repayment.dueDate }}</div>
            <p>Fecha de vencimiento</p>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="item">
          <div>Período de préstamo</div>
          <div>{{ repayment.period }} días</div>
        </div>
        <div class="item">
          <div>Estado</div>
          <div>Prepárese para pagar</div>
        </div>
        <div class="item">
          <div>Nombre: DALMY YADID</div>
          <div class="other-color">Móvil: *** {{repayment.phone}}</div>
        </div>
      </div>
      <div class="card">
        <div class="desc">Manten y cuida su crédito, evitaría un cargo extra por la demora. Le sugerimos realizar el pago con las siguiente cuentas:</div>
        <div class="item">
          <div>Institución:</div>
          <div class="other-color">{{ repayment.depositChannel }}</div>
        </div>
        <div class="item">
          <div>{{ repayment.depositMethod }}:</div>
          <div class="other-color">{{ repayment.paymentCode }}</div>
        </div>
        <div class="item">
          <div>Titular:</div>
          <div class="other-color">{{ repayment.titular }}</div>
        </div>
      </div>
    </div>
    <div class="btn" @click="copyCLABE">Copiado CLABE</div>
  </div>
</template>

<script>

import {Repayment,Toast} from 'vant'
import axios from 'axios'

export default {
  name: 'Repayment',
  components:{

  },
  data(){
    return {
        repayment:{},
        key:"",
        instance:null, // axios 实例
      }
  },
  created () {
    this.getDetailInfo()
  },
  
  methods: {
    async getDetailInfo(){
        let res = await this.$Http.getRepaymentInfo({
          key:'F5AB2552C6154793BB8C0A0485B46311'
        },true)
        this.repayment = res.data
    },
    copyCLABE(){

      Toast('copay')

    }
  }
}
</script>

<style scope="scoped">
* {
  margin: 0;
  padding: 0;
}

header {
  font-size: 16px;
  text-align: center;
  padding: 15px;
  background-color: #6855eb;
  color: white;
}

.placeholder {
  height: 150px;
  background-color: #6855eb;
}

.conent {
  margin-top: -120px;
  padding: 15px;
}

.conent .title-card {
  padding: 15px 30px 25px;
  border-radius: 28px;
  margin-bottom: 25px;
  background-image: linear-gradient(#15b7b9, #6855eb);
}

.conent .title-card .total {
  margin-bottom: 25px;
  text-align: center;
  font-weight: 700;
  color: red;
}

.conent .title-card .total .number {
  font-size: 20px;
  margin-bottom: 5px;
}

.conent .title-card .info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.conent .title-card .info-content {
  text-align: center;
  color: white;
}

.conent .title-card .info-content .number {
  margin-bottom: 5px;
  font-size: 18px;
}

.conent .card {
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 5px #999;
  margin-bottom: 15px;
}

.conent .card .desc {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #333;
}

.conent .card .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #999;
  line-height: 40px;
}

.conent .other-color {
  color: #333;
}

.btn {
  background-color: #6855eb;
  text-align: center;
  line-height: 40px;
  color: white;
  width: 90%;
  margin: auto;
  border-radius: 40px;
}
</style>
